<template>
  <div id="shoppinglistitem">
    <div class="caritem">
      <div class="btn">
        <span class="span">
          <button2
            :isactive="caritem.checked"
            @click.native="btnclick"
          ></button2>
        </span>
      </div>
      <div class="img">
        <img :src="caritem.image" alt="" />
      </div>
      <div class="info">
        <h2>{{ caritem.title }}</h2>
        <p>{{ caritem.desc }}</p>
        <div class="price">¥ {{ caritem.lowNowPrice }}</div>
        <div class="remove" @click="remove" :class="{ active: is }">
          <div class="rm" @touchstart="touchstart" @touchend="touchend">
            删除
          </div>
        </div>
        <div class="nums">
          <button class="jian" @click="jian">-</button> x {{ caritem.count }}
          <button class="add" @click="add">+</button>
        </div>
      </div>
    </div>
  </div>
     
</template>

<script>
import button2 from "./shoppingcar_botton.vue";
export default {
  // 组件名称
  name: "shoppinglistitem", // 组件参数 接收来自父组件的数据
  props: {
    caritem: {
      type: Object,
      default() {
        return {};
      },
    },
  }, // 局部注册的组件
  components: { button2 }, // 组件状态值
  data() {
    return {
      is: false,
    };
  },
  methods: {
    // 点击是否选中该商品
    btnclick() {
      this.caritem.checked = !this.caritem.checked;
    },
    // 确认删除商品功能
    remove() {
      confirm("确定删除吗");
      this.$emit("remove", this.caritem.id);
    },
    // 手指按下删除字眼变色
    touchstart() {
      this.is = true;
    },
    touchend() {
      this.is = false;
    },
    // 商品数量减一功能
    jian() {
      this.$store.dispatch("remove", this.caritem.id).then((res) => {
        console.log(res);
      });
    },
    // 商品数量加一功能
    add() {
      this.$store.dispatch("add", this.caritem.id).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>
<style scoped>
.remove {
  position: absolute;
  right: 102px;
  bottom: 0;
}
.nums {
  position: absolute;
  bottom: 0px;
  right: 10px;
}
button {
  width: 20px;
  height: 20px;
}
.active {
  color: red;
}
.btn1 {
  position: absolute;
  top: -15px;
  left: -19px;
  width: 40px;
  height: 40px;
}

.caritem {
  height: 180px;
  display: flex;
  padding: 10px;
  border-bottom: 2px solid #eee;
}
.btn {
  flex: 10%;
}
.info {
  position: relative;
  flex: 40%;
}
.img {
  flex: 50%;
  margin-right: 10px;
}
.img img {
  width: 100%;
  height: 160px;
  border-radius: 10px;
}
.info h2,
.info p {
  width: 252px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.info h2 {
  font-weight: 500;
  margin-bottom: 16px;
}
.btn span {
  position: relative;
  top: 40%;
  left: -23px;
}
.price {
  color: orange;
  margin-top: 66px;
  font-size: 16px;
}
</style>